<!--  -->
<template>
    <div>
        {{ ruleForm.id > 0 ? "资讯修改" : "资讯添加" }}
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
            class="demo-ruleForm" status-icon>
            <el-form-item label="标题" prop="title">
                <el-input v-model="ruleForm.title" />
            </el-form-item>
            <el-form-item style="width:900px" label="内容" prop="contnet">
                <Editor v-model="ruleForm.content"></Editor>
            </el-form-item>
            <el-form-item label="公告照片" prop="picture">
                <el-upload class="avatar-uploader" :headers="headers" :action="uploadUrl" :show-file-list="false"
                    :on-success="handleAvatarSuccess">
                    <img class="avatar" v-if="ruleForm.picture" :src="imgBaseUrl + ruleForm.picture">
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="状态" prop="state">
                <el-radio-group v-model="ruleForm.state">
                    <el-radio :value="1">显示</el-radio>
                    <el-radio :value="0">隐藏</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-select style="width:150px;" v-model="ruleForm.type" placeholder="请选择类型">
                    <el-option v-for="item in types" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
        </el-form>
        <el-form-item>
            <div style="margin-left:80px;">
                <el-button type="primary" @click="submitForm()">
                    提交
                </el-button>
                <el-button type="primary" @click="back()">
                    返回
                </el-button>
            </div>
        </el-form-item>
    </div>
</template>

<script lang='ts' setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { News } from '../../service/news/type';
import { getUserTypeList, add, getNews } from '../../service/news/news';
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { useUserStore } from '../../store/index';
import { storeToRefs } from 'pinia';
import { Plus } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router';
import moment from 'moment';
import Editor from '../../components/editor/Editor.vue';
const router = useRouter();
const route = useRoute();
const store = useUserStore();
const { token } = storeToRefs(store);
//文件上传的url
const uploadUrl = import.meta.env.VITE_BASE_URL + "upload/add";
const imgBaseUrl = ref(import.meta.env.VITE_IMG_URL);
const headers = { Authorization: token.value }

//上传图片成功回调事件
const handleAvatarSuccess = (res: any) => {
    console.log(res);
    if (res.errCode === 10000) {
        ruleForm.picture = res.data;
    }
}
const ruleForm: any = reactive<News>({
    id: route.params.id ? Number(route.params?.id) : 0,
    title: "",
    picture: "",
    edituser: "",
    state: null,
    type: null,
    hits: 0,
    content: "",
    addtime: moment().format("YYYY-MM-DD HH:mm:ss")

})
const rules = reactive<FormRules<News>>({
    title: [
        { required: true, message: '请输入标题', trigger: 'blur' },
    ],
    state: [
        { required: true, message: '请选择状态', trigger: 'change' },
    ],
    type: [
        { required: true, message: '请选择分类', trigger: 'change' },
    ],
    picture: [
        { required: true, message: '请输入标题', trigger: 'change' },
    ],
})
const ruleFormRef = ref<FormInstance>()

const postData = async () => {

    const res: any = await add(ruleForm);
    console.log(111111111, res);

    if (res.errCode === 10000) {
        router.push("/news");
    }
}
const submitForm = () => {

    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            
            postData();
            ElMessage.success('提交成功');

        }
    })

}

const types = ref<any>([]);
const getNewsTypeData = async () => {

    const res: any = await getUserTypeList();
    if (res.errCode === 10000) {
        types.value = res.data.list;
    }

}

//根据id获取news数据
const getNewsModel = async () => {
    if (ruleForm.id === 0) return;
    const res: any = await getNews(ruleForm.id);
    if (res.errCode === 10000) {
        // ruleForm= res.data;
        Object.assign(ruleForm, res.data);
        if (ruleForm.type == 0) ruleForm.type = null;
    }
}
//富文本编辑器 end
onMounted(() => {
    getNewsTypeData();
    getNewsModel();

})

const back = () => {
    router.go(-1);
}
</script>
<style scoped lang="less">
/deep/ .avatar-uploader .avatar {
    width: 80px;
    height: 80px;
    display: block;
}

/deep/ .avatar-uploader .el-upload {
    width: 80px;
    height: 80px;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}
</style>